<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>VIP</title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/vip.css"/>
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
    </script>
</head>
<body>
<div class="box">
    <div class="vip_a">
        <div class="vip_t">
            <div class="progress">
                <div class="progress_bar"><i></i><span id="money"></span></div>
                <span class="line line1"></span>
                <span class="line line2"></span>
                <span class="line line3"></span>
            </div>
            <div class="vip">
                <ul class="clearfix">
                    <li class="vip1"></li>
                    <li class="vip2"></li>
                    <li class="vip3"></li>
                    <li class="vip4"></li>
                </ul>
            </div>
        </div>
        <div class="novip" style="display: none;">
            <a class="a_btn" href="javascript:;"></a>
        </div>
        <!--    vip_t end     -->
    </div>
    <!--    vip_a end     -->
    <div class="table">
        <img src="img/table.png">
    </div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>
    function getinfo() {
        var url = window.document.location.href.toString();
        var u = url.split("?");
        if (typeof(u[1]) == "string") {
            var get = {};
            get['domain'] = u[0];
            u = u[1].split("&");
            for (var i in u) {
                var j = u[i].split("=");
                get[j[0]] = j[1];
            }
            return get;
        }
        else {
            return {};
        }
    }

    var p = getinfo()
    var token = p.token;

    function vipInfo() {
        $.ajax({
            url: '/vipInfo',
            type: 'get',
            async: false,
            beforeSend: function (request) {
                request.setRequestHeader("userToken", token);
            },
            data: {},
            success: function (data) {

                var vipRecharge = data.data.vipRecharge

                if (vipRecharge) {
                    var vipLevel = vipRecharge.vipLevel
                    if (vipLevel == 0) {
                        $(".novip").show().siblings('.vip_t').hide()
                    }

                    if (vipLevel == 1) {

                        $(".progress_bar").css("width", "25%");
                    }

                    if (vipLevel == 2) {
                        $(".progress_bar").css("width", (((vipRecharge.money - 30) / 70) * 25 + 25) + "%");
                    }

                    if (vipLevel == 3) {
                        $(".progress_bar").css("width", (((vipRecharge.money - 100) / 400) * 25 + 50) + "%");
                    }

                    if (vipLevel == 4) {
                        // $(".progress_bar").css("width", (((vipRecharge.money - 500) / 9999999) * 25 + 75) + "%");
                        $(".progress_bar").css("width", "100%");
                    }

                    $(".vip" + (vipLevel ? vipLevel : "0")).addClass("vip" + (vipLevel ? vipLevel : "0") + "_pre")
                    // $("#money").text("￥ " + vipRecharge.money ? "" + vipRecharge.money : 0)
                    $("#money").text("VIP" + vipLevel)
                }
            },
            fail: function () {

            }
        });
    }

    vipInfo();

    $(".novip .a_btn").click(function (event) {
        doPay()
    });

    function doPay() {
        /iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) ? showPay() : native.showPay()
    }

    document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
</script>